'use client'
import React, {ButtonHTMLAttributes, DetailedHTMLProps, useEffect, useState} from "react";
import styles from "./Button.module.css"
import {Plus, PowerIcon, User, X} from "lucide-react";
import {useRouter} from "next/navigation";

type TypeButtonProps = {
    type: string
    kind: "submit" | "secondary" | "login" | "logout" | "close" | "bigButton" | "addFerry" | "addCaptain"
    content?: string
    onClick?: () => void
} & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>,
    HTMLButtonElement>


export default function Button(
    {
        type,
        kind,
        content,
        onClick,
        ...props
    }: TypeButtonProps) {

    const {push} = useRouter()
        const [isMobile, setIsMobile] = useState(false);

    const handleResize = () => {
        setIsMobile(window.innerWidth < 768);
    };

    useEffect(() => {
        window.addEventListener('resize', handleResize);
        handleResize(); // Проверяем начальный размер экрана

        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);

    const addFerry = () => {
        push('/admin/ships/0/')
    }
    const addCaptain = () => {
        push('/admin/captains/0/')
    }

 const buttonStyles = {
        "submit": { style: styles.standard_button, icon: null, onClick: undefined },
        "secondary": { style: styles.secondary_button, icon: null, onClick: undefined },
        "login": {
            style: styles.standard_button,
            icon: <User className={styles.icon} size={18} />,
            onClick: undefined
        },
        "logout": {
            style: styles.logout_button,
            icon: <PowerIcon className={styles.icon} size={24} />,
            onClick: undefined
        },
        "close": {
            style: styles.close_button,
            icon: <X className={styles.icon} size={25} />,
            onClick: undefined
        },
        "bigButton": { style: styles.big_button, icon: null, onClick: undefined },
        "addFerry": {
            style: styles.add_button,
            icon: isMobile ? <Plus className={styles.icon} size={24} /> : null,
            onClick: addFerry
        },
        "addCaptain": {
            style: styles.add_button,
            icon: isMobile ? <Plus className={styles.icon} size={24} /> : null,
            onClick: addCaptain
        }
    };

    return (
        <button
            type={type}
            onClick={buttonStyles[kind].onClick ? buttonStyles[kind].onClick : onClick}
            className={buttonStyles[kind].style}
            {...props}
        >
            <span className={styles.button_text}>
                {buttonStyles[kind].icon}
                {!isMobile && <span className={styles.content}>{content}</span>}
            </span>
        </button>
    );
};
